..<template>
  <div>
    <!-- 筛选 -->
    <div style="float: left;display: flex;margin-bottom: 10px;">
      <el-input
        @clear="initBtAccountRole"
        clearable
        prefix-icon="el-icon-search"
        placeholder="请输入英文名称"
        class="initBtAccountRole"
        v-model="rolePage.englishName"
        @keydown.enter.native="initBtAccountRoleQuery">
      </el-input>
      <el-input
        @clear="initBtAccountRole"
        clearable
        style="margin-left: 8px;"
        prefix-icon="el-icon-search"
        placeholder="请输入中文名称"
        class="initBtAccountRole"
        v-model="rolePage.chineseName"
        @keydown.enter.native="initBtAccountRoleQuery">
      </el-input>
      <el-select style="margin-left: 8px;width:50%" v-model="rolePage.enabled" @clear="initBtAccountRole" clearable placeholder="请选择">
        <el-option
          v-for="item in enableds"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initBtAccountRoleQuery">查询</el-button>
    </div>
    <div style="display: flex;justify-content: flex-end">
      <el-button
        type="primary"
        @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
      </el-button>
      <el-button
        type="primary"
        @click="insertBtAccountRole"><i class="el-icon-add-location"></i><span>新增角色</span>
      </el-button>
    </div>
<!-- 列表 -->
    <div>
        <el-table
          :data="BtAccountRolesList"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
                <el-table-column
                        label="中文名称"
                        width="250">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>中文名称: {{ scope.row.chineseName }}</p>
                            <p>英文名称: {{ scope.row.englishName }}</p>
                            <p>描述信息: {{ scope.row.distcription }}</p>
                            <p>角色状态:
                                <el-tag type="success" v-if="scope.row.enabled==1">已启用</el-tag>
                                <el-tag type="danger" v-else>未启用</el-tag>
                            </p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.chineseName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="英文名称"
                        width="250">
                    <template slot-scope="scope">
                        <span>{{ scope.row.englishName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="角色状态" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.enabled==1">已启用</el-tag>
                        <el-tag type="danger" v-else>未启用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="描述信息"
                        width="400">
                    <template slot-scope="scope">
                        <span>{{ scope.row.distcription }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                @click="grantMenu(scope.row)"><i class="el-icon-plus"></i>授权菜单</el-button>
                        <el-button
                                type="primary"
                                @click="grantInterface(scope.row)"><i class="el-icon-plus"></i>授权接口</el-button>
                        <el-button
                                @click="updateBtAccountRole(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
                        <el-button
                                type="danger"
                                @click="deleteBtAccountRole(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="deleteBatchBtAccountRoles" type="danger" style="margin-top: 8px;float: left;" :disabled="this.multipleSelection.length==0"><i class="el-icon-delete"></i>批量删除</el-button>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 授权接口弹框 -->
        <div>
            <el-dialog
                    :title="grantInterfaceTitle"
                    :visible.sync="grantInterfaceDialogVisible"
                    width="60%">
              <div>
                <!-- 菜单筛选 -->
                <div id="menuTree" style="width: 180px">
                  <el-input
                      placeholder="输入关键字进行过滤"
                      clearable
                      v-model="filterText">
                  </el-input>
                  <el-tree
                      class="filter-tree1"
                      :data="dataMenu"
                      :props="defaultMenuProps"
                      default-expand-all
                      :filter-node-method="filterMenuNode"
                      ref="tree"
                      show-checkbox
                      node-key="menuId"
                      :check-strictly="true"
                      @check-change="handleCheckChange"
                    @node-click="nodeClick">
                  </el-tree>
                </div>
                <!-- 查询筛选 -->
                <div id="pageList" style="margin-left: 200px;">
                  <div class="addBtAccountResources">
                    <div style="float: left;display: flex;">
                        <el-input
                            clearable
                            style="margin-right: 8px;margin-bottom: 10px;"
                            prefix-icon="el-icon-search"
                            placeholder="请输入资源名称"
                            v-model="resourcesPage.resourcesName"
                            @keydown.enter.native="initBtAccountResourcesQuery">
                        </el-input>
                        <el-input
                            clearable
                            style="margin-right: 8px;margin-bottom: 10px;"
                            prefix-icon="el-icon-search"
                            placeholder="请输入资源URL"
                            v-model="resourcesPage.resourcesPath"
                            @keydown.enter.native="initBtAccountResourcesQuery">
                        </el-input>
                        <el-button style="margin-left: 8px; text-align: center;height: 28px;" icon="el-icon-search" type="info" @click="initBtAccountResourcesQuery">查询</el-button>
                        <el-button style="margin-left: 8px; text-align: center;height: 28px;" icon="el-icon-search" type="primary" @click="newQuery">重置</el-button>
                    </div>
                  </div>

                    <!-- 列表展示 -->
                    <div>
                      <el-table
                              :data="BtAccountResourcesList"
                              row-key="resourcesId"
                              ref="table"
                              height="250"
                              stripe
                              border
                              @selection-change="handleSelectionChanges"
                              style="width: 100%">
                          <el-table-column
                                  type="selection"
                                  width="55">
                          </el-table-column>
                          <el-table-column
                                  label="资源名称">
                              <template slot-scope="scope">
                                  <span>{{ scope.row.resourcesName }}</span>
                              </template>
                          </el-table-column>
                          <el-table-column
                                  label="资源路径">
                              <template slot-scope="scope">
                                  <span>{{ scope.row.resourcesPath }}</span>
                              </template>
                          </el-table-column>
                      </el-table>
                    </div>
                </div>
              </div>
            <span slot="footer" class="dialog-footer">
                  <el-button @click="grantInterfaceDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateGrantInterface">确 定</el-button>
            </span>
            </el-dialog>
        </div>
        <!-- 授权菜单弹框 -->
        <div>
            <el-dialog
                    :title="grantMenuTitle"
                    :visible.sync="grantMenuDialogVisible"
                    width="60%">
            <el-tree
              ref="treeMenu"
              :data="grantMenuData"
              show-checkbox
              node-key="menuId"
              :default-checked-keys="valueMenus"
              :props="defaultProps"
              @check="currentChecked">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                  <el-button @click="grantMenuDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="updateGrantMenu">确 定</el-button>
            </span>
            </el-dialog>
        </div>
<!-- 新增编辑弹框 -->
        <div>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="60%">
                <div>
                    <el-form :model="BtAccountRole" :rules="rules" ref="BtAccountRoleForm">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="中文名称:" prop="chineseName">
                                    <el-input style="width: 250px" prefix-icon="el-icon-edit" v-model="BtAccountRole.chineseName"
                                              placeholder="请输入中文名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="英文名称:" prop="englishName">
                                    <el-input style="width: 450px" prefix-icon="el-icon-edit" v-model="BtAccountRole.englishName"
                                              placeholder="请输入英文名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="角色状态:" prop="enabled" style="margin-left: 8px;">
                                    <el-switch
                                            v-model="BtAccountRole.enabled"
                                            active-color="#13ce66"
                                            inactive-color="#ff4949"
                                            active-text="启用"
                                            :active-value=1
                                            inactive-text="禁用"
                                            :inactive-value=2
                                            >
                                    </el-switch>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="描述信息:" prop="distcription" style="margin-left: 8px;">
                                    <el-input
                                    type="textarea"
                                    :rows="3"
                                    style="width: 815px;margin-right: 180px;"
                                    v-model="BtAccountRole.distcription"
                                    placeholder="请输入角色描述信息">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertBtAccountRoleRequest">确 定</el-button>
                </span>
            </el-dialog>
        </div>
  </div>
</template>

<script>
export default {
 name:"BtAccountResources",
 data(){
   return{
     BtAccountResourcesList:[],
     resourcesPage:{
        resourcesName:'',
        resourcesPath:'',
        menuId:''
    },
     filterText: '',
    // 查询目录属性设置
    defaultMenuProps:{
        children: 'children',
        label: 'menuName'
    },
    // 初始化菜单目录
    dataMenu:[],
    grantInterfaceTitle:'接口按钮授权',
    grantInterfaceDialogVisible:false,
    loading: false,
     // 封装查询条件
    rolePage:{
      englishName:'',
      chineseName:'',
      enabled:0,
      distcription:'',
      pageNum: 1,
      pageSize: 10
    },
    enableds:[{
      value: 0,
      label: '请选择'
    },{
      value: 1,
      label: '已启用'
    },{
      value: 2,
      label: '未启用'
    }],
    // 初始化列表
    BtAccountRolesList:[],
    total: 0,
    // 初始化多选复选框
    multipleSelection:[],
    multipleSelections:[],
    // 编辑新增框数据传输
    BtAccountRole:{
        englishName:'',
        chineseName:'',
        enabled:1,
        distcription:'',
        roleId:''
    },
    // 弹框初始化设置
    title: '',
    dialogVisible: false,
    // 校验规则
    rules: {
        englishName:[{required:true,message:'请输入英文名称',trigger:'blur'}],
        chineseName:[{required: true, message: '请输入中文名称', trigger: 'blur'}]
    },
    // 授权角色
    grantMenuDialogVisible: false,
    grantMenuTitle:'',
    roleIdTemp:'',
    valueMenus:[],
    halfCheckedKeyList:[],
    defaultProps:{
      children:'children',
      label:'menuName'
    },
    grantMenuData:[],
    // 授权角色资源
    roleResourcesInfo:{
      roleId:'',
      resources:[]
    }
   }
  },
  mounted(){
    // 初始化角色列表
    this.initBtAccountRoleQuery();
     // 初始化菜单目录
        this.selectBtAccountMenuInfoTreeList();
  },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
 methods:{
   handleSelectionChanges(val){
            this.multipleSelections = val;
    },
   // 菜单目录选择
        handleCheckChange(data, checked, node){
            if(checked == true){
                this.filterText = data.menuName;
                this.resourcesPage.menuId = data.menuId;
                this.$refs.tree.setCheckedNodes([data]);
            }
        },
        nodeClick(data,checked,node){
            this.filterText = data.menuName;
            this.resourcesPage.menuId = data.menuId;
            this.$refs.tree.setCheckedNodes([data]);
        },
        // 菜单目录节点过滤
        filterMenuNode(value,dataMenu){
            if (!value) return true;
            return dataMenu.menuName.indexOf(value) !== -1;
        },
        // 获取菜单目录
        selectBtAccountMenuInfoTreeList(){
            this.getRequest("/account/BtAccountMenu/select/BtAccountMenuInfoTreeList").then(resp => {
                if (resp) {
                    this.dataMenu = resp.data;
                }
            });
        },
   // 重置查询条件
        resetCondition(){
            this.rolePage.englishName = '';
            this.rolePage.chineseName = '';
            this.rolePage.enabled = 0;
            this.rolePage.distcription = '';
            this.initBtAccountRoleQuery();
        },
   // 初始化角色列表
   initBtAccountRoleQuery(){
      this.loading = true;
        this.postRequest("/account/BtAccountRole/query/BtAccountRolePageList",this.rolePage).then(resp => {
        this.loading = false;
        if (resp) {
          this.BtAccountRolesList = resp.data.list;
          this.total = resp.data.total;
        }
    });
  },
  // 编辑角色信息
    updateBtAccountRole(data){
      this.initBtAccountRoleQuery();
      this.title = '编辑角色信息';
      this.BtAccountRole = data;
      this.dialogVisible = true;
    },
  // 添加角色信息
    insertBtAccountRole(){
      this.title = "添加角色信息";
      this.dialogVisible = true;
    },
    insertBtAccountRoleRequest(){
      if (this.BtAccountRole.roleId) {
          this.$refs['BtAccountRoleForm'].validate(valid => {
              if (valid) {
                  this.putRequest("/account/BtAccountRole/update/BtAccountRoleInfo", this.BtAccountRole).then(resp => {
                      if (resp) {
                          this.dialogVisible = false;
                          this.initBtAccountRole();
                      }
                  })
              }
          });
      } else {
        this.$refs['BtAccountRoleForm'].validate(valid => {
            if (valid) {
                this.postRequest("/account/BtAccountRole/insert/BtAccountRoleInfo", this.BtAccountRole).then(resp => {
                    if (resp) {
                        this.dialogVisible = false;
                        this.initBtAccountRole();
                    }
                })
            }
        });
      }
  },
  // 初始化资源对象
  initBtAccountRole(){
      this.BtAccountRole.englishName='';
      this.BtAccountRole.chineseName='';
      this.BtAccountRole.enabled=1;
      this.BtAccountRole.distcription='';
      this.BtAccountRole.roleId='';
      this.initBtAccountRoleQuery();
  },
  // 复选框
  handleSelectionChange(val){
    this.multipleSelection = val;
  },
  // 批量删除账户角色信息
  deleteBatchBtAccountRoles(){
    this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
  }).then(() => {
    let roleIds = '?';
    this.multipleSelection.forEach(item=>{
    roleIds += 'roleIds='+item.roleId+'&';
  })
  this.deleteRequest("/account/BtAccountRole/delete/BatchBtAccountRoleInfoByRoleIds"+ roleIds).then(resp=>{
  if (resp){
    this.initBtAccountRoleQuery();
  }
  })
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });
  });
  },
  // 删除账户角色信息
  deleteBtAccountRole(data){
    this.$confirm('此操作将永久删除【'+data.chineseName+'】, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
      }).then(() => {
        this.deleteRequest('/account/BtAccountRole/delete/BtAccountRoleInfoByRoleId?roleId='+data.roleId).then(resp=>{
          if (resp){
            this.initBtAccountRoleQuery();
      }
    })
  }).catch(() => {
    this.$message({
      type: 'info',
      message: '已取消删除'
    });
  });
  },
  // 授权菜单
  grantMenu(data){
    this.grantMenuDialogVisible = true;
    this.grantMenuTitle = "授权菜单";
    // 获取菜单Tree列表
    this.getRequest("/account/BtAccountMenu/select/BtAccountMenuInfoTreeList").then(resp => {
      if (resp) {
          this.grantMenuData = resp.data;
      }
    });
    // 获取角色可访问菜单
    this.getRequest("/account/BtAccountRole/select/BtRoleWithMenuInfo?roleId="+data.roleId).then(resp => {
        if (resp) {
            let menuList = resp.data
            // 如果有父节点则父节点为全选中状态，子节点所有被选中，实际情况是部分子节点没有被选中，父节点应该为半选中状态
            // 偶尔渲染Tree失败  ?
             menuList.forEach((menu) => {
              var node = this.$refs.treeMenu.getNode(menu.menuId);
              if(node.isLeaf){
                  this.$refs.treeMenu.setChecked(node, true);
              }
            });
            this.roleIdTemp = data.roleId;
        }
    });
  },
  updateGrantMenu(){
    let url = "/account/BtAccountRole/update/BtRoleMenuInfo?roleId="+this.roleIdTemp;
    this.valueMenus.forEach((menuId)=>{
        url += '&menuIds=' + menuId;
    });
    this.halfCheckedKeyList.forEach((key)=>{
      url += '&menuIds=' + key;
    }),
    this.putRequest(url).then(resp => {
        if (resp) {
            this.grantMenuDialogVisible = false;
            this.roleIdTemp = "";
            // 清除缓存
            this.$store.dispatch('SETNAV',[]);
            // 手动刷新页面跳到指定路由
            this.$router.push("/home");
        }
    });
  },
  // 动态更新选中的节点key
  currentChecked (nodeObj, SelectedObj) {
    // 赋值根节点状态为全选中的key和所有子节点被选中的key
    this.valueMenus = SelectedObj.checkedKeys;
    // 记录半选中根节点key
    this.halfCheckedKeyList = SelectedObj.halfCheckedKeys;
  },
  // 授权接口
  grantInterface(data){
    this.grantInterfaceDialogVisible = true;
      // 获取角色可访问资源
      this.getRequest("/account/BtAccountRole/select/BtRoleWithResourcesInfo?roleId="+data.roleId).then(resp => {
          if (resp) {
              const ResourcesIds = [];
              let ResourcesList = resp.data;
              this.roleIdTemp = data.roleId;
                  ResourcesList.forEach((Resources) => {
                      ResourcesIds.push(Resources.resourcesId);
                  });
              this.BtAccountResourcesList.forEach(item =>{
                  ResourcesIds.forEach((it) => {
                    if (item&&item!='undefined'&&item.resourcesId==it) {
                      this.$refs.table.toggleRowSelection(item,true);
                    }
                  });
              })
          }
      });
      this.initBtAccountResourcesQuery();
  },
   // 初始化资源列表
  initBtAccountResourcesQuery(){
      this.postRequest("/account/BtAccountResources/select/BtAccountResourcesList",this.resourcesPage).then(resp => {
          if (resp) {
              this.BtAccountResourcesList = resp.data;
              this.getRequest("/account/BtAccountRole/select/BtRoleWithResourcesInfo?roleId="+this.roleIdTemp).then(resp => {
                if (resp) {
                    const ResourcesIds = [];
                    let ResourcesList = resp.data;
                        ResourcesList.forEach((Resources) => {
                            ResourcesIds.push(Resources.resourcesId);
                        });
                    this.BtAccountResourcesList.forEach(item =>{
                        ResourcesIds.forEach((it) => {
                          if (item&&item!='undefined'&&item.resourcesId==it) {
                            this.$refs.table.toggleRowSelection(item,true);
                          }
                        });
                    })
                  }
              });
          }
        });
  },
  // 重置查询初始化资源列表
  newQuery(){
    this.$refs.tree.setCheckedNodes([]);
    this.filterText = '';
    this.resourcesPage.resourcesName = '';
    this.resourcesPage.resourcesPath = '';
    this.resourcesPage.menuId = '';
    this.initBtAccountResourcesQuery();
  },
  // 授权接口
  updateGrantInterface(){
    this.roleResourcesInfo.roleId = this.roleIdTemp;
    this.multipleSelections.forEach((item)=>{
        this.roleResourcesInfo.resources.push({
          resourcesId: item.resourcesId
        })
    });
    this.putRequest("/account/BtAccountRole/update/BtRoleResourcesInfoByRoleId",this.roleResourcesInfo).then(resp => {
        if (resp) {
            this.grantInterfaceDialogVisible = false;
            this.roleIdTemp = "";
            // 清除缓存
            this.$store.dispatch('SETNAV',[]);
            // 手动刷新页面跳到指定路由
            this.$router.push("/");
        }
    });
  },
   // 分页
  sizeChange(currentSize) {
    this.rolePage.pageSize = currentSize;
    this.initBtAccountRoleQuery();
  },
  currentChange(currentPage) {
    this.rolePage.pageNum = currentPage;
    this.initBtAccountRoleQuery();
  }
 }
}
</script>

<style scoped>
    .addBtAccountResources{
        margin-bottom: 10px;
    }
    #menuTree{
       position:absolute;
        width: 180px;
        border: 1px solid #E7E7E7;
        height: 290px;
    }
    .filter-tree1{
        overflow: auto;
        flex: 1;
        width: 170px;
        height: 250px;
        margin:  10px;
    }
    #menuTree #pageList{
      position:relative;
    }
</style>
